<template>
  <div>
    <el-dialog :title="info.title" :visible.sync="info.isShow">
      <el-form :model="form">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="form.rolename"></el-input>
        </el-form-item>

        <el-form-item label="角色权限" :label-width="formLabelWidth">
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            :default-checked-keys="defaultSelect"
            :props="defaultProps"
            ref="tree"
          >
            <!-- @check="check" -->
          </el-tree>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="form.status"
            active-color="blue"
            inactive-color="grey"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" v-if="info.isAdd"
          >确 定</el-button
        >
        <el-button type="primary" @click="update" v-else>修 改</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { roleAdd, menuList, roleOne, roleUpdate } from "../../../request/api";
import { successAlert } from "../../../utils/alert";
export default {
  props: ["info"],
  data() {
    return {
      form: {
        rolename: "",
        menus: "",
        status: 1, //1.正常  2.禁用
      },
      formLabelWidth: "70px",
      data: [],
      defaultSelect: [],
      defaultProps: {
        children: "children",
        label: "title",
      },
    };
  },
  methods: {
    cancel() {
      this.info.isShow = false;
      this.form = {
        rolename: "",
        menus: "",
        status: 1, //1.正常  2.禁用
      };
      this.defaultSelect = this.$refs.tree.setCheckedKeys([]);
    },
    confirm() {
      this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKeys());
      console.log(this.form.menus);
      roleAdd(this.form).then((res) => {
        if (res.code === 200) {
          successAlert(res.msg);
          this.cancel();
          this.event.$emit("roleList");
        }
      });
    },
    // check(nodeObj, SelectedObj) {
    //   //   console.log(SelectedObj)
    //   // console.log(SelectedObj.checkedKeys)   // 这是选中的节点的key数组
    //   //   console.log(SelectedObj.checkedNodes); // 这是选中的节点数组
    //   if (SelectedObj.checkedNodes.length > 0) {
    //     this.form.menus = SelectedObj.checkedNodes[0].label;
    //   }
    // },
    goDetail(id) {
      roleOne({ id }).then((res) => {
        if (res.code === 200) {
          console.log(res);
          this.form = res.list;
          this.form.id = id;
          this.defaultSelect =JSON.parse(res.list.menus);
        }
      });
    },
    update() {
      roleUpdate(this.form).then((res) => {
        console.log(res);
        console.log(this.form);
        if (res.code === 200) {
          successAlert(res.msg);
          this.cancel();
          this.event.$emit("roleList");
        }
      });
    },
  },
  mounted() {
    menuList({ istree: true }).then((res) => {
      if (res.code === 200) {
        this.data = res.list;
      }

      // if (res.code === 200) {
      //   //   二级树放到一个数组，对象转数组
      //   let arr = [];
      //   res.list.forEach((item) => {
      //     // 一级树定义
      //     let trees = {
      //       id: item.id,
      //       label: item.title,
      //     };
      //     //   判断是否有二级树
      //     if (item.children) {
      //       item.children.forEach((i) => {
      //         // 二级树定义
      //         let child = {
      //           id: i.id,
      //           label: i.title,
      //         };
      //         arr.push(child);
      //         //   一级树添加二级树
      //         trees.children = arr;
      //       });
      //     }
      //     //   将一级树和二级树放到原树数组里
      //     this.data.push(trees);
      //   });
      // }
    });
  },
};
</script>

<style>
</style>